<template>
<header class="head">
      <a class="back tl" href="javascript:;" v-show="show">
       <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">阳光厨房</small>
      </a>
      <a href="javascript:;" class="tr">
        <small class="font_18 co_f"></small>
      </a>	
</header>    
</template>

<script>
export default {
  name: 'head',
  data () {
    return {
      show:false,//默认隐藏
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
a{list-style:none;text-decoration: none;}
header {
    width: 100%;
    height: 45px;
}
.head {
    background: #008c3f;
    color: #fff;
    line-height: 45px;
    text-align: center;
    font-size: 1.2rem;
    position:relative;
}
header .head a:nth-child(2) {
    width: 100%;
}
.font_18 {
    font-size:1.2rem;
}
.co_f {
    color: #fff !important;
}
.back{
  position:absolute;
  top:0px;
  left:0px;
  i{
    color:#fff;  
    vertical-align: middle;
    margin-left: 5px;
  
  }
} 
</style>
